import React, { useEffect, useState } from 'react';
import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
import './Myserver.scss'
interface Props { }
function Myserver(props: Props) {
  var location = useLocation()
  var [liang, setLiang] = useState('/myse/hot')
  useEffect(() => {
    setLiang(location.pathname)
  }, [location.pathname])
  var navigate = useNavigate()
  return (
    <div className='myserver'>
      <div className='center'>
        <header>
          <h1>个人服务</h1>
          <ul>
            <li className={liang == '/index/myse/hot' ? 'liang' : ''} onClick={() => { navigate('/index/myse/hot') }}>按热度</li>
            <li className={liang == '/index/myse/zhuti' ? 'liang' : ''} onClick={() => { navigate('/index/myse/zhuti') }} >按主题</li>
            <li className={liang == '/index/myse/bumen' ? 'liang' : ''} onClick={() => { navigate('/index/myse/bumen') }} >按部门</li>
            <li className={liang == '/index/myse/life' ? 'liang' : ''} onClick={() => { navigate('/index/myse/life') }} >按生命周期</li>
          </ul>
        </header>
        <Outlet />
      </div>
    </div>
  );
}

export default Myserver;